<template>
  <div class="wrapper">
    <div class="recommend">
      <home-card :cardLists="cardLists"></home-card>
    </div>
  </div>
</template>
<script>
import HomeCard from "./components/HomeCard";
import Bscroll from "better-scroll";
import axios from "axios";
import ObserveDom from "@better-scroll/observe-dom";
Bscroll.use(ObserveDom);
export default {
  name: "recommend",
  components: {
    HomeCard,
  },
  data() {
    return {
      cardLists: [],
    };
  },
  methods: {
    async getHomeCardData() {
      let res = await axios.get("/api/homecard.json");
      res = res.data;
      if (res.ret && res.data) {
        const result = res.data;
        this.cardLists = result.cardLists;
      }
    },
  },
  mounted() {
    this.getHomeCardData().then(() => {
      this.scroll = new Bscroll(".wrapper", {
        click: true,
        scrollbar: true,
        observeDOM: true,
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 82vh;
}
</style>